<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="开通会员">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 轮播图 -->
		<view class="">
			<carousel :img-list="imgList" url-key="url" :current="currentIndex" @change="swiperChange"
				@selected="selectedBanner" />
		</view>
		<view class="quanyi">
			<view class="quanyi-tit">会员权益</view>
			<view class="ci_num">
				<view class="qy-num">{{qingtong.contantview}} <text class="qy-t">次</text> </view>
			</view>
			<view class="mianfei">免费查看联系方式次数</view>
		</view>
		<view class="guize">
			<view class="quanyi-tit">会员规则</view>
			<view class="guize-t">
				<u-parse :content="qingtong.content"></u-parse>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="foot_btn d-flex align-items justify-content-center">
			<view class="foot_btn-but">
				<u-button :text="price" size="large" @click="get_kaitong" color="#FF6400"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserLevel,
		payorder
	} from '@/api/user.js'
	import carousel from '@/components/vear-carousel/vear-carousel'
	export default {
		components: {
			carousel
		},
		data() {
			return {
				imgList: [{
					url: 'https://lianfan.nccpu.cn/image/qingtong_bj@1x.png',
					id: 1
				}, {
					url: 'https://lianfan.nccpu.cn/image/baiyin_bj@1x.png',
					id: 2
				}, {
					url: 'https://lianfan.nccpu.cn/image/huangjing_bj@1x.png',
					id: 3
				}],
				content: `<p>1.会员只可享受对应会员的权益</p>
							<p>2.会员金额只能在****小程序中使用且无法退款</p>
							<p>3.最终解释权归****所有</p>
							<p>4.超出之后享受折扣83折</p>`,
				qingtong: {},
				price: '',
				currentIndex: 0,
				huiyuan_jibie: '',
				id: '',
			}
		},
		onLoad(option) {
			this.id = option.id
			this.get_lunbo()
		},
		methods: {
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 选择轮播图会员
			selectedBanner(item, index) {
				console.log('aaaaaaaaaaaaaaaa', item, index)
			},
			// 获取轮播图会员级别
			swiperChange(e) {
				console.log("a--------", e);
				this.huiyuan_jibie = e.detail.current
				this.get_lunbo()
			},
			// 获取轮播图会员级别
			get_lunbo() {
				var data = {
					type: 2,
				}
				if (this.huiyuan_jibie == 0) {
					getUserLevel(data).then(res => {
						console.log("获取会员级别", res);
						this.qingtong = res.data.level[0]
						this.price = "马上开通 ￥" + res.data.level[0].price
					})
				}
				if (this.huiyuan_jibie == 1) {
					getUserLevel(data).then(res => {
						console.log("获取会员级别", res);
						this.qingtong = res.data.level[1]
						this.price = "马上开通 ￥" + res.data.level[1].price
					})
				}
				if (this.huiyuan_jibie == 2) {
					getUserLevel(data).then(res => {
						console.log("获取会员级别", res);
						this.qingtong = res.data.level[2]
						this.price = "马上开通 ￥" + res.data.level[2].price
					})
				}
			},
			get_kaitong() {
				var data = {
					type: 0,
					level_id: this.qingtong.id,
					content_id: this.id,
				}
				payorder(data).then(res => {
					console.log("获取开通会员", res);
					if (res.code == 1) {
						if (res.data.is_zhifu == 1) {
							uni.requestPayment({
								appId: res.data.pay_info.appId,
								nonceStr: res.data.pay_info.nonceStr,
								package: res.data.pay_info.package,
								paySign: res.data.pay_info.paySign,
								signType: res.data.pay_info.signType,
								timeStamp: res.data.pay_info.timestamp,
								success(res) {
									console.log("支付结果", res);
									if (res.errMsg == "requestPayment:ok") {
										uni.showToast({
											title: '支付成功',
											icon: 'none'
										})
										setTimeout(() => {
											if (typeof 'that.$util.prePage().get_cishu' ==
												"function") {
												that.$util.prePage()
													.get_cishu()
											}
											uni.navigateBack({
												delta: 1
											})
										}, 1000)
									}
								},
								fail(e) {
									console.log("支付shibai", e);
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									})
								}
							})
						} else {
							this.get_cishu()
						}
					}
				})
			},
		}
	}
</script>

<style>
	.foot_btn-but {
		width: 670rpx;
		margin: auto;
	}

	.foot_btn {
		width: 750rpx;
		height: 128rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 23rpx 0rpx #999;
	}

	.scroll-view-item_h {
		width: 730rpx;
		margin-left: 30rpx;
		display: inline-block;

	}

	.scroll-view-item {
		width: 100%;
		white-space: nowrap;
	}

	.guize-t {
		width: 564rpx;
		margin: auto;
		font-size: 27rpx;
		line-height: 50rpx;
		color: #666666;
		margin-top: 20rpx;
	}

	.ci_num {
		margin-top: 27rpx;
	}

	.mianfei {
		font-size: 26rpx;
		color: #6E635A;
		text-align: center;
		margin-top: 42rpx;
	}

	.qy-t {
		font-size: 24rpx;
		color: #666666;
		margin-left: 8rpx;
	}

	.qy-num {
		font-size: 72rpx;
		color: #D49017;
		text-align: center;
	}

	.quanyi-tit {
		font-size: 36rpx;
		color: #333333;
		text-align: center;
		padding-top: 43rpx;
	}

	.guize {
		width: 690rpx;
		padding-bottom: 30rpx;
		margin: auto;
		border-radius: 8rpx;
		background: rgba(255, 255, 255, 0.72);
	}

	.quanyi {
		width: 690rpx;
		height: 313rpx;
		margin: 30rpx auto;
		border-radius: 8rpx;
		background: rgba(255, 255, 255, 0.72);
	}

	.youxiaoqi {
		font-size: 28rpx;
		font-weight: normal;
		color: #FFFFFF;
		position: absolute;
		bottom: 65rpx;
		left: 45rpx;
	}

	.huiyuan_grade {
		width: 572rpx;
		margin: 30rpx auto;
		display: block;
	}

	.huiyuan-img {
		width: 572rpx;
		margin: auto;
		margin-right: 30rpx;
		position: relative;
	}

	page {
		background: url('https://lianfan.nccpu.cn/image/hui-bg.png') no-repeat;
		background-size: cover;
	}
</style>